<template>
  <view class="ikz-updata-box">
    <view class="ikz-updata-title">
      <view>
        {{show_data.title}}
      </view>
    </view>
    <view class="ikz-updata-bottom">
      <view class="ikz-updata-add" v-for="(item,index) in files" :key="index">
        <image class="ikz-updata-img" mode="aspectFill" :src="item"></image>
        <image class="ikz-updata-del" mode="aspectFit" src="/static/updata/del.png" @click="delPic(index)"></image>
      </view>
      <image class="ikz-updata-img" src="/static/updata/add.png" @click="addPic"></image>
    </view>
  </view>
	
</template>

<script>
	export default {
		name: 'updata',
		props: {
			showData: {
				type: Object,
			},
			cssData:{
				type: Object,
			}
		},
		data() {
			return {
        show_data:{
          title:'附件信息'
        },
        files:[],
			};
		},
    watch: {
      showData: {
        handler(newName, oldName) {
          if(!newName){
            this.show_data.title = '附件信息';
          }else{
            this.show_data.title = newName.title;
          }
        },
        immediate: true,
        deep: true
      }
    },
		mounted() {
	
		},
		methods: {
      //删除图片
      delPic(index){
        this.files.splice(index,1);
        this.$emit('returnFiles',this.files);
        this.$forceUpdate();
		console.log(this.files);
      },
      //选择图片
      addPic(){
        var that = this;
        wx.chooseImage({
          count: 9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            if(that.files.length){
              var temp_file = res.tempFilePaths;
              for(var i = 0;i<temp_file.length;i++){
                 that.files.push(temp_file[i]);
              }
            }else{
              that.files = res.tempFilePaths;
            }
            that.$forceUpdate();
            that.$emit('returnFiles',that.files)
          }
        })
      },
		}
	};
</script>

<style scoped>
  .ikz-updata-title{
    display: flex;
    align-items: center;
    
    
  }
  .ikz-updata-bottom{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20rpx;
  }
  .ikz-updata-add{
    position: relative;
    margin-left: 10rpx;
  }
  .ikz-updata-del{
    position: absolute;
    right: -15rpx;
    top: -15rpx;
    width: 50rpx;
    height: 50rpx;
  }
  .ikz-updata-img{
    width: 150rpx;
    height: 150rpx;
  }
</style>
